<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--设备数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="deviceName"
            placeholder="请输入设备名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px" />
        </div>
        <div class="head-container">
          <el-tree
            :data="deviceOptions"
            :props="defaultProps"
            :expand-on-click-node="true"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          >
             <span  slot-scope="{ node, data }">
             <!-- 使用作用域插槽，插入图标-->
               <span>
                    <i :class="data.icon"></i>  {{ node.label }}
               </span>
             </span>
          </el-tree>
        </div>
      </el-col>


      <!--用户数据-->
      <el-col :span="20" :xs="24">

        <el-table v-loading="loading" :data="attributeList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="属性" align="center"  prop="attributeName"/>
          <el-table-column label="值" align="center"    prop="attributeValue"  />
          <el-table-column label="时间" align="center" prop="attributeDate" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.attributeDate,)}}</span>
            </template>
          </el-table-column>

          <el-table-column label="状态" align="center"  prop="attributeStatus"  >
            <template slot-scope="scope">
              <dict-tag :options="dict.type.t_device_type" :value="scope.row.attributeStatus"/>
            </template>

          </el-table-column>

          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope" >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-circle-check"
                @click="handleEnable(scope.row)"
                v-hasPermi="['system:user:edit']"
              >启用</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-circle-close"
                @click="handleDisable(scope.row)"
                v-hasPermi="['system:user:remove']"
              >停用</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { deiceTreeSelect ,deviceAttributeList ,handleAttributeEnable ,handleAttributeDisable } from "@/api/snowRemoving/device";

export default {
  name: "Device",
  dicts: ['t_device_type'],
  data() {
    return {
      // 总条数
      total: 0,
      // 遮罩层
      loading: false,
      // 时间范围
      dateRange:[],
      // 显示搜索条件
      showSearch: true,
      // 设备名称
      deviceName:undefined,
      // 设备树选项
      deviceOptions: undefined,
      // 桩号的属性数据
      attributeList:[],
      //表单参数
      queryParams:{
        pageNum: 1,
        pageSize: 20,
        serialNumber: null
      },
      defaultProps: {
        children: "children",
        label: "label"
      },

    };
  },

  watch: {
    // 根据名称筛选部门树
    deviceName(val) {
      this.$refs.tree.filter(val);
    },
  },

  created() {
    //查询设备树
    this.getDeiceTree();
  },

  updated() {
    this.$nextTick(() => {
      const selectedNode = this.$refs.tree.getNode(this.selectedNodeKey);
      if (selectedNode) {
        selectedNode.selected = true;
        this.$refs.tree.setCurrentKey(this.selectedNodeKey);
        //this.$refs.tree.$el.querySelector('.highlight').scrollIntoView();
      }
    });
  },

  methods: {

    /** 查询桩号数据 */
    getList() {
      this.loading = true;
      deviceAttributeList(this.queryParams).then(response => {
          this.attributeList = response.rows;
          //this.total = response.total;
          this.loading = false;
        }
      );
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    /** 查询设备下拉树结构 */
    getDeiceTree() {
      deiceTreeSelect().then(response => {
        this.deviceOptions = response.data;
      });
    },

    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    // 节点单击事件
    handleNodeClick(data,node) {
      const a = this.$refs.tree.getNode(data.id);
      this.selectNodeByKey(node.key);
      if (a.childNodes.length === 0) {
        this.queryParams.serialNumber = data.id;
        this.handleQuery();
        //console.log("子节点");
      }
    },

    // 存缓存防止状态改变后丢失节点丢失高亮状态
    selectNodeByKey(key) {
      this.selectedNodeKey = key;
      localStorage.setItem('selectedNodeKey', key);
      // this.$refs.tree.getCheckedNodes().forEach(node => {
      //   node.selected = false;
      //   this.$refs.tree.setCurrentKey(null);
      // });
      const selectedNode = this.$refs.tree.getNode(key);
      if (selectedNode) {
        selectedNode.selected = true;
        this.$refs.tree.setCurrentKey(key);
      }
    },




    /** 启用按钮 */
    handleEnable(row){
      this.$modal.confirm('是否确认启用'+row.attributeName+'？').then(function() {
        return handleAttributeEnable(row);
      }).then(() => {
        this.getDeiceTree();
        this.getList();
        this.$modal.msgSuccess("启用成功");
      }).catch(() => {});
    },


    /** 禁用按钮 */
    handleDisable(row){
      this.$modal.confirm('是否停用'+row.attributeName+'？').then(function() {
        return handleAttributeDisable(row);
      }).then(() => {
        this.getList();
        this.getDeiceTree();
        this.$modal.msgSuccess("停用成功");
      }).catch(() => {});
    }


  }
};
</script>
